import { View } from "@tarojs/components";
import { ReactNode } from "react";
import "./BySpace.less";

type BySquareProps = {
  gap?: number;
  className?: string;
  children?: ReactNode;
};
export default ({ className, gap = 24, children }: BySquareProps) => {
  return (
    //  :style="{ gap: `0 ${Taro.pxTransform(gap)}` }" 小程序下 ios 无效
    <View
      className={`flex flex-wrap by-space ${className}`}
      style={{
        // @ts-expect-error
        "--gap": gap ? gap + "rpx" : undefined,
        margin: `-${gap}rpx 0 0 -${gap}rpx`,
      }}
    >
      {children}
    </View>
  );
};
